<template>
  <div>
    <a-modal title="提交仓库" :visible="visible" @before-open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <div v-if="!noSubmit">
        <div class="title">请再次确认是否将{{ type == 'order' ? '订单' : '包裹' }}【{{ filterId() }}】,提交仓库？</div>
        <div class="sub-title" v-if="type == 'order'">提交发货将该订单生成销售出库单，并且订单状态设置为“待发货”。</div>
      </div>
      <div v-else>
        <div class="item mb10">
          <div class="top"> 抱歉，以下订单提交仓库失败：</div>
          <div class="con">
            <a-table size="mini" :pagination="false" class="table-singe-line" :data="questionList" :scroll="{ y: '300px' }">
              <template #columns>
                <a-table-column title="订单号" width="" #cell="{ record }">
                  <span class="highlight">{{ record.platOrderNumber }}</span>
                </a-table-column>
                <a-table-column title="包裹号" width="" #cell="{ record }">
                  {{ record.packageNumber }}
                </a-table-column>
                <a-table-column title="原因" width="" #cell="{ record }">
                  <div v-for="item of record.messageList">{{ item }}</div>
                </a-table-column>
              </template>
            </a-table>

            <!-- <ul>
              <li v-for="(note, index) of item.noteList">{{ index + 1 }} {{ note }}</li>
            </ul> -->
          </div>
        </div>
      </div>
      <template #footer>
        <a-button class="gray-outline" @click="handleCancel" v-if="!noSubmit">取消</a-button>
        <a-button type="primary" :loading="loading" class="ml10" @click="handleOk" v-if="!noSubmit">确认</a-button>
        <a-button type="primary" class="ml10" v-if="noSubmit" @click="handleCancel('cancel')">知道了</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { submitWarehouse, submitPackageWarehouse } from '@/api/order'
  export default defineComponent({
    props: ['selectRow', 'type'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data = reactive({
        loading: false,
        noSubmit: false,
        questionList: [],
      })

      const open = () => {
        console.log(props.selectRow, props.type)
      }
      const handleOk = async () => {
        data.loading = true
        let res: any = {}
        if (props.type == 'order') {
          let ids = props.selectRow.map((e: any) => e.id)
          res = await submitWarehouse(ids)
        } else {
          // let ids = props.selectRow.map((e: any) => e.packageNumber)
          res = await submitPackageWarehouse({ packageId: props.selectRow[0].id })
        }

        if (res.data[0]) {
          data.noSubmit = true
          data.questionList = res?.data || []
        } else {
          visible.value = false
          emit('save')
        }
        data.loading = false
      }
      const handleCancel = (type?: string) => {
        visible.value = false
        data.loading = false
        data.noSubmit = false
        if (type) emit('save')
      }

      const filterId = () => {
        let arr: any = []
        if (props.type == 'order') {
          arr = props.selectRow.map((e: any) => e.platformOrderNumber)
          return arr.join(',')
        } else {
          arr = props.selectRow.map((e: any) => e.packageNumber)
          return arr.join(',')
        }
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        filterId,
      }
    },
  })
</script>

<style lang="less" scoped>
  .sub-title {
    font-size: 12px;
    color: #b3b3b3;
  }

  .item {
  }
</style>
